<template>
  <div class="bg-white rounded-lg shadow-lg">
    <div class="p-6">
      <!-- 作业标题 -->
      <div class="text-center mb-8">
        <h2 class="text-3xl font-bold text-gray-800 mb-4 flex items-center justify-center">
          <span class="text-3xl mr-3">📝</span>
          Vue事件处理综合练习 - 多功能文本编辑器
        </h2>
        <p class="text-lg text-gray-600 max-w-3xl mx-auto">
          通过创建一个功能丰富的文本编辑器，全面掌握Vue事件处理的各种技术，包括鼠标事件、键盘事件、事件修饰符等核心概念。
        </p>
      </div>

      <!-- 学习目标 -->
      <div class="mb-8">
        <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="text-2xl mr-2">🎯</span>
          学习目标
        </h3>
        <div class="grid md:grid-cols-2 gap-4">
          <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
            <h4 class="font-semibold text-blue-800 mb-2">技术目标</h4>
            <ul class="space-y-2 text-sm text-blue-700">
              <li class="flex items-start"><span class="mr-2">✓</span>掌握基本事件处理语法（@click、@input、@keydown等）</li>
              <li class="flex items-start"><span class="mr-2">✓</span>理解事件对象的使用和参数传递</li>
              <li class="flex items-start"><span class="mr-2">✓</span>运用事件修饰符（.prevent、.stop、.ctrl、.shift等）</li>
              <li class="flex items-start"><span class="mr-2">✓</span>实现复杂的键盘快捷键组合</li>
              <li class="flex items-start"><span class="mr-2">✓</span>掌握右键菜单和拖拽事件处理</li>
            </ul>
          </div>
          <div class="bg-green-50 p-4 rounded-lg border border-green-200">
            <h4 class="font-semibold text-green-800 mb-2">能力目标</h4>
            <ul class="space-y-2 text-sm text-green-700">
              <li class="flex items-start"><span class="mr-2">✓</span>培养复杂用户界面的交互设计思维</li>
              <li class="flex items-start"><span class="mr-2">✓</span>提升事件处理的性能优化意识</li>
              <li class="flex items-start"><span class="mr-2">✓</span>增强用户体验和可访问性设计能力</li>
              <li class="flex items-start"><span class="mr-2">✓</span>锻炼代码组织和模块化开发能力</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 项目功能介绍 -->
      <div class="mb-8">
        <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="text-2xl mr-2">⚡</span>
          项目功能
        </h3>
        <div class="grid md:grid-cols-3 gap-6">
          <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="text-3xl mb-3">📄</div>
            <h4 class="font-semibold text-gray-800 mb-2">文件操作</h4>
            <ul class="text-sm text-gray-600 space-y-1">
              <li>• 新建文件</li>
              <li>• 打开文件</li>
              <li>• 保存文件</li>
              <li>• 另存为</li>
              <li>• 多标签页管理</li>
            </ul>
          </div>
          <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="text-3xl mb-3">✂️</div>
            <h4 class="font-semibold text-gray-800 mb-2">编辑功能</h4>
            <ul class="text-sm text-gray-600 space-y-1">
              <li>• 撤销/重做</li>
              <li>• 剪切/复制/粘贴</li>
              <li>• 查找替换</li>
              <li>• 全选操作</li>
              <li>• 右键菜单</li>
            </ul>
          </div>
          <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="text-3xl mb-3">🎨</div>
            <h4 class="font-semibold text-gray-800 mb-2">界面定制</h4>
            <ul class="text-sm text-gray-600 space-y-1">
              <li>• 字体大小调节</li>
              <li>• 字体类型选择</li>
              <li>• 自动换行</li>
              <li>• 全屏模式</li>
              <li>• 实时状态显示</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 实践指南 -->
      <div class="mb-8">
        <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="text-2xl mr-2">📋</span>
          实践指南
        </h3>
        <div class="space-y-6">
          <!-- 阶段1 -->
          <div class="border border-gray-200 rounded-lg p-6">
            <div class="flex items-center mb-4">
              <span class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold mr-3">1</span>
              <h4 class="text-lg font-semibold text-gray-800">基础界面与工具栏 (20分钟)</h4>
            </div>
            <div class="ml-11 space-y-3">
              <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <h5 class="font-medium text-blue-800 mb-2">🎯 任务1: 工具栏按钮事件</h5>
                <ul class="text-sm text-blue-700 space-y-1">
                  <li>• 完成新建、打开、保存按钮的 <code class="bg-blue-200 px-1 rounded text-xs">@click</code> 事件</li>
                  <li>• 实现撤销/重做按钮的状态控制 <code class="bg-blue-200 px-1 rounded text-xs">:disabled</code></li>
                  <li>• 添加工具栏按钮的悬停效果和提示</li>
                </ul>
              </div>
              <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
                <h5 class="font-medium text-yellow-800 mb-2">🎯 任务2: 下拉选择器事件</h5>
                <ul class="text-sm text-yellow-700 space-y-1">
                  <li>• 字体大小选择器的 <code class="bg-yellow-200 px-1 rounded text-xs">@change</code> 事件</li>
                  <li>• 字体类型选择器的 <code class="bg-yellow-200 px-1 rounded text-xs">v-model</code> 双向绑定</li>
                  <li>• 实现选择器值的实时应用</li>
                </ul>
              </div>
              
              <!-- 详细实现指南 -->
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.1-1.md'"
                  title="任务1：工具栏按钮点击事件处理详细指南"
                />
              </div>
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.1-2.md'"
                  title="任务2：撤销/重做功能实现详细指南"
                />
              </div>
            </div>
          </div>

          <!-- 阶段2 -->
          <div class="border border-gray-200 rounded-lg p-6">
            <div class="flex items-center mb-4">
              <span class="bg-green-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold mr-3">2</span>
              <h4 class="text-lg font-semibold text-gray-800">键盘快捷键系统 (25分钟)</h4>
            </div>
            <div class="ml-11 space-y-3">
              <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                <h5 class="font-medium text-green-800 mb-2">🎯 任务3: 基础快捷键</h5>
                <ul class="text-sm text-green-700 space-y-1">
                  <li>• 实现 <code class="bg-green-200 px-1 rounded text-xs">@keydown.ctrl.z</code> 撤销快捷键</li>
                  <li>• 实现 <code class="bg-green-200 px-1 rounded text-xs">@keydown.ctrl.y</code> 重做快捷键</li>
                  <li>• 添加 <code class="bg-green-200 px-1 rounded text-xs">@keydown.f11</code> 全屏切换</li>
                </ul>
              </div>
              <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
                <h5 class="font-medium text-purple-800 mb-2">🎯 任务4: 编辑快捷键</h5>
                <ul class="text-sm text-purple-700 space-y-1">
                  <li>• 实现 <code class="bg-purple-200 px-1 rounded text-xs">@keydown.ctrl.x</code> 剪切功能</li>
                  <li>• 实现 <code class="bg-purple-200 px-1 rounded text-xs">@keydown.ctrl.c</code> 复制功能</li>
                  <li>• 实现 <code class="bg-purple-200 px-1 rounded text-xs">@keydown.ctrl.v</code> 粘贴功能</li>
                  <li>• 实现 <code class="bg-purple-200 px-1 rounded text-xs">@keydown.ctrl.a</code> 全选功能</li>
                </ul>
              </div>
              
              <!-- 详细实现指南 -->
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.1-3.md'"
                  title="任务3：基础快捷键实现详细指南"
                />
              </div>
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.1-4.md'"
                  title="任务4：编辑快捷键实现详细指南"
                />
              </div>
            </div>
          </div>

          <!-- 阶段3 -->
          <div class="border border-gray-200 rounded-lg p-6">
            <div class="flex items-center mb-4">
              <span class="bg-purple-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold mr-3">3</span>
              <h4 class="text-lg font-semibold text-gray-800">右键菜单与拖拽功能 (20分钟)</h4>
            </div>
            <div class="ml-11 space-y-3">
              <div class="bg-red-50 p-4 rounded-lg border border-red-200">
                <h5 class="font-medium text-red-800 mb-2">🎯 任务5: 右键菜单</h5>
                <ul class="text-sm text-red-700 space-y-1">
                  <li>• 实现 <code class="bg-red-200 px-1 rounded text-xs">@contextmenu.prevent</code> 右键事件</li>
                  <li>• 动态显示菜单位置 <code class="bg-red-200 px-1 rounded text-xs">:style="{left: x + 'px', top: y + 'px'}"</code></li>
                  <li>• 添加菜单项的点击事件处理</li>
                </ul>
              </div>
              <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-200">
                <h5 class="font-medium text-indigo-800 mb-2">🎯 任务6: 文件拖拽</h5>
                <ul class="text-sm text-indigo-700 space-y-1">
                  <li>• 实现 <code class="bg-indigo-200 px-1 rounded text-xs">@dragover.prevent</code> 拖拽悬停</li>
                  <li>• 实现 <code class="bg-indigo-200 px-1 rounded text-xs">@drop.prevent</code> 文件放置</li>
                  <li>• 添加拖拽状态的视觉反馈</li>
                </ul>
              </div>
              
              <!-- 详细实现指南 -->
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.1-5.md'"
                  title="任务5：右键菜单功能实现详细指南"
                />
              </div>
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.1-6.md'"
                  title="任务6：文件拖拽功能实现详细指南"
                />
              </div>
            </div>
          </div>

          <!-- 阶段4 -->
          <div class="border border-gray-200 rounded-lg p-6">
            <div class="flex items-center mb-4">
              <span class="bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold mr-3">4</span>
              <h4 class="text-lg font-semibold text-gray-800">高级功能与优化 (25分钟)</h4>
            </div>
            <div class="ml-11 space-y-3">
              <div class="bg-orange-50 p-4 rounded-lg border border-orange-200">
                <h5 class="font-medium text-orange-800 mb-2">🎯 任务7: 查找替换功能</h5>
                <ul class="text-sm text-orange-700 space-y-1">
                  <li>• 实现 <code class="bg-orange-200 px-1 rounded text-xs">@keydown.ctrl.f</code> 打开查找面板</li>
                  <li>• 实现 <code class="bg-orange-200 px-1 rounded text-xs">@keydown.enter</code> 查找下一个</li>
                  <li>• 实现 <code class="bg-orange-200 px-1 rounded text-xs">@keydown.shift.enter</code> 查找上一个</li>
                  <li>• 添加替换功能和批量替换</li>
                </ul>
              </div>
              
              <!-- 详细实现指南 -->
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.1-7.md'"
                  title="任务7：查找替换功能实现详细指南"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 技术要点提示 -->
      <div class="mb-8">
        <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="text-2xl mr-2">💡</span>
          关键技术要点
        </h3>
        <div class="grid md:grid-cols-2 gap-6">
          <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg border border-blue-200">
            <h4 class="font-semibold text-blue-800 mb-3 flex items-center">
              <span class="mr-2">⌨️</span>键盘事件修饰符
            </h4>
            <div class="space-y-2 text-sm text-blue-700">
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@keydown.ctrl.s.prevent="saveFile"</code>
                <p class="mt-1 text-xs">组合键 + 阻止默认行为</p>
              </div>
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@keydown.esc="closeModal"</code>
                <p class="mt-1 text-xs">特殊键处理</p>
              </div>
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@keydown.enter.shift="newLine"</code>
                <p class="mt-1 text-xs">多修饰符组合</p>
              </div>
            </div>
          </div>
          <div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-lg border border-green-200">
            <h4 class="font-semibold text-green-800 mb-3 flex items-center">
              <span class="mr-2">🖱️</span>鼠标事件处理
            </h4>
            <div class="space-y-2 text-sm text-green-700">
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@contextmenu.prevent="showMenu"</code>
                <p class="mt-1 text-xs">右键菜单事件</p>
              </div>
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@dragover.prevent @drop.prevent</code>
                <p class="mt-1 text-xs">拖拽事件处理</p>
              </div>
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@click.stop="selectText"</code>
                <p class="mt-1 text-xs">阻止事件冒泡</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 开始实践 -->
      <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-8 text-white text-center">
        <h3 class="text-2xl font-bold mb-4">🚀 开始你的编程挑战</h3>
        <p class="text-lg mb-6 opacity-90">
          准备好创建一个功能强大的文本编辑器了吗？让我们开始这个激动人心的项目！
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <a href="/chap05/tasks/5.1.html" target="_blank" 
             class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center">
            <span class="mr-2">👀</span>
            查看完整案例
          </a>
          <button @click="startAssignment" 
                  class="bg-yellow-400 text-gray-800 px-8 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors flex items-center">
            <span class="mr-2">✨</span>
            开始作业
          </button>
        </div>
        <div class="mt-6 text-sm opacity-75">
          <p>💡 提示：建议使用Chrome或Firefox浏览器以获得最佳体验</p>
        </div>
      </div>

      <!-- 提交作业 -->
      <div class="mt-8 bg-gray-50 rounded-lg p-6 border border-gray-200">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="mr-2">📤</span>
          作业提交
        </h3>
        <div class="space-y-4">
          <div class="bg-white p-4 rounded-lg border border-gray-200">
            <h4 class="font-medium text-gray-800 mb-2">提交要求</h4>
            <ul class="text-sm text-gray-600 space-y-1">
              <li>• 完整的HTML文件，包含所有功能实现</li>
              <li>• 功能演示截图或录屏（重点展示事件处理效果）</li>
              <li>• 代码注释说明关键事件处理逻辑</li>
              <li>• 实现过程中的问题总结和解决方案</li>
              <li>• 可选：额外功能扩展和创新点</li>
            </ul>
          </div>
          <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
            <h4 class="font-medium text-yellow-800 mb-2">评分标准</h4>
            <div class="grid md:grid-cols-2 gap-4 text-sm text-yellow-700">
              <div>
                <p class="font-medium mb-1">基础功能 (60分)</p>
                <ul class="space-y-1">
                  <li>• 工具栏按钮事件处理 (15分)</li>
                  <li>• 键盘快捷键实现 (20分)</li>
                  <li>• 文本编辑功能 (15分)</li>
                  <li>• 界面交互响应 (10分)</li>
                </ul>
              </div>
              <div>
                <p class="font-medium mb-1">高级功能 (40分)</p>
                <ul class="space-y-1">
                  <li>• 右键菜单实现 (10分)</li>
                  <li>• 拖拽功能 (10分)</li>
                  <li>• 查找替换功能 (10分)</li>
                  <li>• 代码质量和创新 (10分)</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">截止时间：课程结束后一周</span>
            <button class="px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors font-medium">
              提交作业
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useAssignmentStore } from '@/stores/assignment'
import MarkdownViewer from './MarkdownViewer.vue'

// 获取路由和store实例
const router = useRouter()
const assignmentStore = useAssignmentStore()

// 开始作业方法
const startAssignment = async () => {
  // 导航到编辑器页面并加载基础模板文件
  try {
    // 获取基础模板文件内容
    const response = await fetch('/chap05/tasks/5.1-base.html')
    if (!response.ok) {
      throw new Error('Failed to load assignment template file')
    }
    const templateContent = await response.text()
    
    // 创建一个临时的示例对象
    const assignmentTemplate = {
      id: 'assignment-text-editor',
      title: 'Vue事件处理作业 - 多功能文本编辑器',
      description: '基于Vue 3的多功能文本编辑器作业项目',
      content: templateContent,
      filePath: '/chap05/tasks/5.1-base.html'
    }
    
    // 记录当前路由作为返回路径
    const currentRoute = router.currentRoute.value
    const returnRoute = {
      path: currentRoute.path,
      query: currentRoute.query
    }
    
    // 设置当前示例，指定来源为assignments页面，并记录返回路由
    assignmentStore.setCurrentExample(assignmentTemplate, 'assignments', returnRoute)
    
    // 导航到编辑器页面
    await router.push('/editor')
  } catch (error) {
    console.error('Failed to load assignment template:', error)
    // 如果加载失败，回退到打开新窗口的方式
    window.open('/chap05/tasks/5.1-base.html', '_blank')
  }
}
</script>

<style scoped>
/* 组件特定样式 */
</style>